<template>
  <div class="image-upload">
    <el-card>
      <h1>小程序图片上传, 固定目录 /mini/</h1>
      <upload-resource
        is-public
        v-permission="['upload:image:btn']"
        @upload="showImgUrl"
        folder="mini"
        use-file-name
      ></upload-resource>
      <p>图片地址是:</p>
      <p>{{ miniImgUrl }}</p>
    </el-card>

    <el-card>
      <h1>显示固定图片资源(如Logo等)上传, 固定目录 /res/</h1>
      <upload-resource
        is-public
        v-permission="['upload:image:btn']"
        @upload="showResImgUrl"
        folder="res"
        use-file-name
      ></upload-resource>
      <p>图片地址是:</p>
      <p>{{ resImgUlr }}</p>
    </el-card>

    <el-card>
      <h1>官网图片资源上传, 固定目录 /res/official</h1>
      <upload-resource
        is-public
        v-permission="['upload:image:btn']"
        @upload="showOfficialResImgUrl"
        folder="res/official"
        use-file-name
      ></upload-resource>
      <p>图片地址是:</p>
      <p>{{ resOfficialImgUlr }}</p>
    </el-card>

    <el-card>
      <h1>散图,临时图上传, 固定目录 /other/</h1>
      <upload-resource
        is-public
        v-permission="['upload:image:btn']"
        @upload="showOtherImgUrl"
        folder="other"
        use-file-name
      ></upload-resource>
      <p>图片地址是:</p>
      <p>{{ otherImgUrl }}</p>
    </el-card>

    <el-card>
      <h1>视频上传, 固定目录 /video/</h1>
      <upload-resource
        is-public
        is-resource
        multiple
        accept-outer="video/mp4,video/x-m4v,video/*,.mkv,.rmvb"
        v-permission="['upload:image:btn']"
        folder="video"
        use-file-name
        @upload="showVideoUrl"
      ></upload-resource>
      <p>视频地址是:</p>
      <p>{{ videoUrl }}</p>
    </el-card>

    <el-card>
      <h1>app上传, 固定目录 /app/</h1>
      <upload-resource
        is-public
        is-resource
        multiple
        v-permission="['upload:image:btn']"
        folder="app"
        use-file-name
        @upload="showAppUrl"
      ></upload-resource>
      <p>app地址是:</p>
      <p>{{ appUrl }}</p>
      <qr-code :qrUrl="this.appSrc" :qrSize="200" :qrText="this.appName"></qr-code>
    </el-card>
  </div>
</template>

<script>
  import UploadResource from 'comp/UploadResource';
  import QrCode from 'comp/QrCode';
  export default {
    components: {
      UploadResource,
      QrCode,
    },
    data() {
      return {
        miniImgUrl: '',
        resImgUlr: '',
        otherImgUrl: '',
        videoUrl: '',
        resOfficialImgUlr: '',
        appUrl: '', //app文件路径
        appSrc: '', //app二维码内容
        appName: '', //app文件名
      };
    },
    methods: {
      showImgUrl(data) {
        this.miniImgUrl = data.url;
        this.$message.success('上传成功了!');
      },
      showResImgUrl(data) {
        this.resImgUlr = data.url;
        this.$message.success('上传成功了!');
      },
      showOtherImgUrl(data) {
        this.otherImgUrl = data.url;
        this.$message.success('上传成功了!');
      },
      showVideoUrl(data) {
        this.videoUrl = data.url;
        this.$message.success('上传成功了!');
      },
      showOfficialResImgUrl(data) {
        this.resOfficialImgUlr = data.url;
        this.$message.success('上传成功了!');
      },
      showAppUrl(data) {
        if (data.url.indexOf('plist') != -1) {
          this.appSrc = 'itms-services://?action=download-manifest&url=' + data.url;
          this.appUrl = data.url;
          this.appName = data.name.substring(4, data.name.length - 6);
        } else {
          this.appUrl = data.url;
        }
        this.$message.success('上传成功了!');
      },
    },
  };
</script>

<style lang="less" scoped>
  .image-upload {
    .el-card {
      margin-bottom: 20px;
    }

    .upload-model {
      text-align: left;
    }
    .el-input {
      margin: 10px 0;
    }
  }
</style>
